<template>
    <v-box :title="'系统名称变更'">
        <VCenter style="padding-top:15px; max-width:500px;">
            <template #head>
                <n-form-item label="当前名称" label-width="80px" label-placement="left"  style="width:100%;pointer-events: none;">
                    <n-input  v-model:value="userInfo.COMPANYNAME" />
                </n-form-item>
                <view style="height:15px;"></view>

                <n-form-item label-width="80px" label="更改为" label-placement="left" style="width:100%">
                    <n-input placeholder="请输入修改的名称"  v-model:value="comName" />
                </n-form-item>
                <view style="height:15px;"></view>

                <VCenter :row="true" style="padding-left:70px;">
                    <template #head>
                        <n-button @click="updateCname(comName)" color="#2f9383">
                            确认修改
                        </n-button >
                    </template>
                </VCenter>
            </template>
        </VCenter>
    </v-box>
</template>
<script>
import VBox from "@/components/scraw/VBox.vue"
import VCenter from "@/components/scraw/VCenter.vue"
import {getCurrentInstance, ref} from "vue"
export default {
    components:{ VBox,VCenter },
    data() {return  {comName:null}},
    setup() {
        const { proxy: cthis } = getCurrentInstance();
        return {userInfo:ref(cthis.$userInfo), updateCname: function(cname){
            if(cname) {
                if(cname.length > 16) {
                    cthis.$ElMessage({message:"名称不能超过十六个字符",type:'warning',center:true})
                    return 
                }
                cthis.$http.get('updateComName', {params:{cname}}).then(()=> {
                    this.userInfo.COMPANYNAME = cname
                })
            }else {
                cthis.$ElMessage({message:"请输入系统名称",type:'warning',center:true})
            }
        }}
    },
}
</script>